<template>
  <div class="editbrief">
    <div class="head">
      <div class="name">编辑简报</div>
      <div class="del"@click="$router.go(-1)">取消</div>
      <div class="save" @click="savebrief()">保存简报</div>
    </div>
    <div class="bodyer">
      <div class="block1">
        <div>
          <input type="text" placeholder="" v-model="briefingName">
          <el-select class="block1-select" v-model="select[0]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="small" >
          第<input type="text" v-model="periods">期
        </div>
        <div v-show="select[0] > 0">
          <input type="text" placeholder="" v-model="organizationName">
        </div>
        <div v-show="select[0] > 1"> 
          {{createTime}}
        </div>
        
      </div>
      <div class="block2">
        <div class="input">
          <input type="text" v-model="titles[0]">
          <el-select class="block2-select" v-model="select[1]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="desc">{{str}} </div>
      </div>
      <div class="block2">
        <div class="input">
          <input type="text" v-model="titles[1]" >
          <el-select class="block2-select" v-model="select[2]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="text">
          <textarea  v-model="suggestion"></textarea>
        </div>
      </div>
      <div class="block2">
        <div class="input">
          <input type="text" v-model="titles[2]">
          <el-select class="block2-select" v-model="select[3]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="block2">
        <div class="input">
          <input type="text" v-model="titles[3]">
          <el-select class="block2-select" v-model="select[4]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="desc">
          监测主题相关信息{{this.rele.t}}条，
          其中敏感{{this.rele.m}}条，敏感占比{{this.rele.mz}}%，
          非敏感{{this.rele.nm}}条，非敏感占比{{this.rele.nmz}}%
          </div>
      </div>
      <div class="block2">
        <div class="input">
          <input type="text" v-model="titles[4]" >
          <el-select class="block2-select" v-model="select[5]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="statistics" id='MediaSources'></div>
      </div>
      <div class="block2">
        <div class="input">
          <input type="text" v-model="titles[5]">
          <el-select class="block2-select" v-model="select[6]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="degrees" id='MediaActivity'></div>
      </div>
      <div class="block2">
        <div class="input">
          <input type="text" v-model="titles[6]" >
          <el-select class="block2-select" v-model="select[7]" placeholder="请选择" v-show="0==1">
            <el-option
              v-for="item in block2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="table">
          <div class="item">
            <div class="index">序列</div>
            <div class="title">标题</div>
            <div class="from">日期和来源</div>
            <div class="tive">属性</div>
          </div>
          <div class="item" v-for="(item,index) in tables.slice(0,10)" :key="index">
            <div class="index">{{index+1}}</div>
            <div class="title">{{item.title}}</div>
            <div class="from">
              <div>{{item.poTime|filtertime}}</div>
              <div>{{item.source || item.webSite}}</div>
              </div>
            <div class="tive">{{item.positiveOrNegative==2?sensitive:nsensitive}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import moment from 'moment'
let block1 = [{value: 0,label: '样式1'}, {value: 1,label: '样式2'}, {value: 3,label: '样式3'}]
let block2 = [{value: 0,label: '标题一'}, {value: 1,label: '标题二'}]
let titles = ["本期导读", "处置建议","监测总览","监测概述","信息来源类型统计","媒体活跃度","主要舆情"]
let select = [1,1,1,1,1,1,1,1,]
export default {
  name:'editbrief',
  data(){
    return{
      shuzu:'',
      titles,
      select,
      sensitive:'敏感',
      nsensitive:'非敏感',
      localvalue:'',
      block1,
      block2,
      tables:[],
      suggestion:'',
      organizationName:'',
      periods:0,
      createTime:'',
      briefingName:'',
      rele:{
        t: 0,
        m: 0,
        mz: 0,
        nm: 0,
        nmz: 0
      },
      str:'',
      websiteLeader:''
    }
  },
  mounted(){
    let id = this.$route.params.id
    this.queryById(id)
  },
  filters:{
    filtertime(value){
      let t = moment(value).format('YYYY-MM-DD HH:mm:ss')
      return t 
    }
  },
  methods:{
    async queryById(id){
      let res = await this.$http.post('vrv-monitor-platform-web/briefing/queryById',{
        id:id
      })
      this.MediaSources(res)
      this.MediaActivity(res)
      this.briefingName = res.body.data.briefingName
      this.tables = JSON.parse(res.body.data.importantOpinion)
      let _title = JSON.parse(res.body.data.titles)
      this.titles = [_title.title1,_title.title2,_title.title3,_title.title31,_title.title32,_title.title33,_title.title4]
      this.suggestion = res.body.data.suggestion
      this.organizationName = res.body.data.organizationName
      this.periods = res.body.data.periods
      this.websiteLeader = res.body.data.websiteLeader
      this.createTime = moment(res.body.data.createTime).format('YYYY-MM-DD HH:mm:ss')
      this.setprop(JSON.parse(res.body.data.sensitivity))
      this.setwebsite(JSON.parse(res.body.data.website))
    },
    setprop(arr){
      this.rele.t = arr.reduce((a,d) => a +d.doc_count,0)
      this.rele.m = arr.filter(d => d.key ==2)[0].doc_count
      this.rele.mz = ((this.rele.m/this.rele.t)*100).toFixed(2)
      this.rele.nm = this.rele.t - this.rele.m
      this.rele.nmz = ((this.rele.nm/this.rele.t)*100).toFixed(2)
    },
    setwebsite(arr){
      let t = arr.reduce((a,d) => a +d.doc_count,0)
      let m = `本报告就加入素材的文章进行分析，共有${t}篇相关素材。`
      arr.forEach(d =>{
        let str = d.websiteName+d.doc_count+'篇,占比'+(d.doc_count/t*100).toFixed(2)+'%,'
        m += str
      });
      m+=`目前主要的报道集中在${this.websiteLeader}等几大站点。详细报告请继续浏览。`
      this.str = m
    },
    MediaSources(res){
      let el = document.getElementById('MediaSources')
      let MediaSources = echarts.init(el)
      let arr = JSON.parse(res.body.data.website)
      let name = arr.map(d => d.websiteName)
      let data = arr.map(d => ({
        value: d.doc_count,
        name: d.websiteName
      }))
			let option = {
			    title : {
			        text: '媒体来源占比',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: name
			    },
			    series : [
			        {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
			        }
			    ]
			};
			MediaSources.setOption(option)
    },
    async MediaActivity(res){
      let el = document.getElementById('MediaActivity')
      let MediaActivity = echarts.init(el)
      let arr = JSON.parse(res.body.data.liveness)
			let option = {
					title: {
				        text: '媒体活跃度'
				    },
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : arr.map(d => d.name),
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'直接访问',
				            type:'bar',
				            barWidth: '60%',
				            data:arr.map(d => d.value)
				        }
				    ]
				};
				MediaActivity.setOption(option)
    },
    async savebrief(){
      if(!this.organizationName){
        this.$message.error('名字不能为空')
        return
      }
      if(!this.briefingName.trim()){
        this.$message.error('名字不能为空')
        return
      }
      if(this.briefingName.length>10){
        this.$message.error('名称不能多于10位数')
        return
      }
      let _titles ={title1:this.titles[0],title2:this.titles[1],title3:this.titles[2],title31:this.titles[3],
      title32:this.titles[4],title33:this.titles[5],title4:this.titles[6]}
      let res = await this.$http.post('vrv-monitor-platform-web/briefing/updateBriefing',{
        briefingName:this.briefingName,
        id:this.$route.params.id,
        organizationName:this.organizationName,
        periods:this.periods,
        titles:_titles,
        headStyle:this.select[0],
        suggestion:this.suggestion
      })

      if(res.body.success){
        this.$router.push('/brief/briefprocess/list')
      }
    },
  }
}
</script>
<style lang="stylus" scoped>
  .editbrief
    padding 0 30px
    padding-bottom 25px
    .head
      height 70px
      line-height 70px
      border-bottom 1px solid #dcdcdc
      overflow hidden
      >.name
        float left
        width 200px
        font-size 21px
        color #555
        font-weight bold
      >.save
      >.del
        margin-top 22px
        cursor pointer
        float right 
        width 120px
        height 34px
        background-color #e85a47
        line-height 34px
        background-image url('img/generate.png') 
        background-repeat no-repeat
        background-size 20px 20px
        background-position 16px 50%
        font-size 12px
        text-indent 40px
        color #fff
        font-weight normal 
        border-radius 5px
      >.del
        background-image url('img/brief-close.png') 
        margin-left 25px
        background-color #aaa
        text-indent 60px
  .block1
    text-align center
    padding-top 25px
    >div 
      position relative
      margin-top 10px
      font-size 16px
      color #555
      &:first-of-type
        margin-top 0
      &.small
        font-size 20px
        >input
          width 38px
          margin 0 10px
      .block1-select
        position absolute
        left 50%
        margin-left 250px
        width 100px
      >input
        width 398px
        height 34px
        border 1px solid #dcdcdc
        border-radius 4px  
        text-align center
        outline none
  .block2
    margin-top 20px
    .input
      >input 
        width 88px
        height 34px
        border-radius 4px
        border 1px solid #dcdcdc
        padding 0 5px
        outline none
      >.block2-select
        width 100px
        height 34px
        margin-left 8px
    >.desc
      padding 0 28px
      font-size 16px
      color #333
      line-height 25px
      margin-top 25px
    >.text
      textarea
        font-family "Microsoft YaHei"
        height 124px
        padding 5px 25px
        font-size 16px
        color #999999
        width 100%
        border 1px solid #dcdcdc
        box-sizing border-box
        border-radius 5px
        margin-top 25px
        outline none 
        resize none
    >.statistics
    >.degrees
      margin-top 25px
      height 300px
      border 1px solid #dcdcdc
    >.table
      margin-top 25px
      min-height 300px
      border 1px solid #dcdcdc
      font-size 14px
      >.item
        display flex
        height 50px
        border-top 1px solid #dcdcdc
        line-height 50px
        >div
          text-align center
          flex 1
          font-size 14px
          overflow hidden
          &.from
            div
              line-height 25px
</style>


